<template>
  <el-dropdown trigger="click" @command="changePriority" @visible-change="dropdownChange">
    <span class="dropdown-link" :class="['priority' + priority, active ? 'active': '', hasPower? 'hasPower': '']">
      <i class="circle"></i><span>{{priorityContent[priority]}}</span><i class="el-icon--right" :class="[active ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="(item, key) in priorityContent" :command="key" v-if="hasPower">{{item}}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
  import {getCurrentDateTime} from '@/utils/m7Utils'
  export default {
    name: 'priority',
    props: {
      business: {type: Object, default: function () { return {} }}
    },
    data () {
      return {
        priorityContent: {
          '1': this.$t('business.priority1'),
          '2': this.$t('business.priority2'),
          '3': this.$t('business.priority3'),
        },
        active: false
      }
    },
    computed: {
      priority () {
        return this.business.priority || '1'
      },
      hasPower () {
        let sessionId = this.$store.state.session.sessionId
        return this.business.master === sessionId || this.business.createUser === sessionId
      }
    },
    watch: {
    },
    methods: {
      changePriority (priority) {
        if (priority === this.priority) {
          return
        }
        this.$store.dispatch('changeBusinessPriority', {id: this.business._id, priority}).then((res) => {
          if (res.success) {
            this.$message.success(this.$t('business.operateSuc'))
            let data = {
              businessId: this.business._id,
              step: this.business.step,
              action: 'changePriority',
              excuteData: {
                oldPriority: this.business.priority || '1',
                newPriority: priority,
              },
              time: getCurrentDateTime(),
              master: this.$store.state.session.user._id
            }
            this.$store.commit('business/UPDATE_BUS_DETAIL', {_id: this.business._id, priority})
            this.$store.commit('business/ADD_BUSINESS_ACTION_HISTORY', {data})
            this.$store.commit('business/UPDATE_BUS_CARD', {_id: this.business._id, priority})
          }
        })
      },
      dropdownChange (visible) {
        this.active = visible
      }
    },
    mounted () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl";
  .circle
    display inline-block
    width 12px
    height 12px
    border-radius 50%
    margin 3px 3px 0 0
  .dropdown-link.active.hasPower
    border 1px solid $c-affix
    .el-icon--right
      display block
  .dropdown-link
    display inline-flex
    padding 2px 8px
    margin-top -3px
    border 1px solid rgba(0,0,0,0)
    &.hasPower:hover
      border 1px solid $c-affix
      cursor pointer
      .el-icon--right
        display block
    .el-icon--right
      display none
      margin-top 3px
  .priority1
    color #58970F
    .circle
      background-color #58970F
  .priority2
    color $cf-color0
    .circle
      background-color $cf-color0
  .priority3
    color $priority3
    .circle
      background-color $priority3
</style>
